<template>
  <div>
    <div v-for="(item, index) in $store.state.list" :key="index">
      <van-row
        type="flex"
        align="center"
        style="padding: 10px 0"
        v-if="item.isFlag == item.isFlag"
      >
        <van-col span="1"> </van-col>
        <van-col span="2">
          <van-checkbox
            v-model="item.checked"
            v-if="item.isFlag != 'c'"
            @click="addChe(index)"
          ></van-checkbox>
        </van-col>
        <van-col span="16">
          <span @click="addisEd(index)" v-show="item.isEd == false">{{
            item.title
          }}</span>
          <!-- 编辑框 -->
          <input
            type="text"
            v-model="item.title"
            v-show="item.isEd == true"
            @blur="addisEd(index)"
            v-focus
          />
        </van-col>
        <van-col span="5">
          <van-button
            type="warning"
            size="mini"
            v-if="item.isFlag == 'a'"
            @click="addQx(index)"
            >取消</van-button
          >
          <span v-if="item.isFlag == 'b'">{{ item.time | time }}</span>
          <van-button
            type="warning"
            size="mini"
            v-if="item.isFlag == 'c'"
            @click="addDel(index)"
            >删除</van-button
          >
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: [],
  //注册组件
  components: {},
  data() {
    return {};
  },
  // 在实例创建完成后被立即调用最早开始使用 data和methods中数据的钩子
  created() {},
  //挂载完成，HTML已经被渲染到了页面上，这个阶段可以执行dom操作，可以进行数据请求
  mounted() {},
  //方法
  methods: {},
  //计算属性
  computed: {},
  //监听器
  watch: {},
  //自定义指令
  directives: {
    focus:{
      componentUpdated(el,binding){
        console.log('指令触发')
        el.focus()
      }
    }
  },
  filters:{
    time(val){
      // 年月日格式化
      let year = new Date(val).getFullYear();
      let month = new Date(val).getMonth() +1;
      let day = new Date(val).getDate();
      return `${year}/${month.toString().padStart(2,'0')}/${day.toString().padStart(2,'0')}`
    }
  }
};
</script>

<style lang="scss" scoped></style>
